<template>
    <div ref="fullscreenDiv" class="board">
        <div class="title">
            <span @click="isService">详情</span>
            <div class="left-opt">
                <a-button class="theme-btn" @click="leftShow = !leftShow">{{ leftShow ? '收起' : '展开' }}</a-button>
            </div>
            <div class="full-screen">
                <span class="time-filter">
                    <a-radio-group
                        v-model:value="search.timeType"
                        class="theme-radio"
                        size="small"
                        option-type="button"
                        button-style="solid"
                        :options="timeOptions"
                        @change="changeTimeType(search.timeType)"
                    />
                    &nbsp;
                    <a-range-picker v-show="search.timeType === 7" v-model:value="search.date_range" class="theme-input" size="small" allow-clear value-format="YYYY-MM-DD" />
                </span>
                <a-button id="full-screen" class="theme-btn" @click="fullScreen">全屏</a-button>
            </div>
            {{ chooseProject?.name }}数据看板
        </div>
        <div class="flex">
            <div v-show="leftShow" class="left-list format-scrollbar">
                <div class="left-list-search">
                    <a-input v-model:value="searchProject" class="theme-input" placeholder="项目查询" allow-clear>
                        <template #prefix>
                            <search-outlined />
                        </template>
                    </a-input>
                </div>
                <a-card>
                    <a-card-grid class="text-center cursor-pointer" :class="{ choose: !chooseProject }" style="width: 100%; line-height: 40px; padding: 0" @click="toChooseAllCompany()">
                        全部项目
                    </a-card-grid>
                </a-card>
                <a-card v-if="innerProjectList.length">
                    <a-card-grid
                        v-for="(item, index) in innerProjectList"
                        :key="index"
                        class="text-center cursor-pointer"
                        :class="{ choose: chooseProject?.id === item.id }"
                        style="width: 100%; line-height: 40px; padding: 0"
                        @click="toChooseProject(item)"
                    >
                        {{ item.name }}
                    </a-card-grid>
                </a-card>
                <a-empty v-else :image="simpleImage" />
            </div>
            <div class="border-main flex">
                <div class="statistics flex">
                    <div class="t-statistics flex">
                        <div class="tl-statistics flex">
                            <div class="tl-t-statistics">
                                <div class="title ant-layout-content">合同统计</div>
                                <div id="contractStatistics" search style="height: calc(100% - 30px); overflow: hidden"></div>
                                <a-empty v-else-show :image="simpleImage" />
                            </div>
                            <div class="tl-b-statistics flex-auto">
                                <div class="title ant-layout-content">
                                    计划、验收及出库统计
                                    <a-select
                                        v-model:value="dailyType"
                                        class="theme-select"
                                        size="small"
                                        :options="dailyTypeOpts"
                                        option-filter-prop="label"
                                        style="position: absolute; right: 5px; top: 3px"
                                        @change="changeDailyType"
                                    ></a-select>
                                </div>
                                <div id="dailyStatistics" style="height: calc(100% - 25px); overflow: hidden"></div>
                            </div>
                        </div>
                        <div class="tr-statistics flex-auto">
                            <div class="title">成本概况</div>
                            <a-empty style="color: white" :image="simpleImage" :description="null">待确认</a-empty>
                        </div>
                    </div>
                    <div class="b-statistics flex flex-auto">
                        <div class="bl-statistics flex">
                            <div class="bl-statistics-title">
                                <div class="title">
                                    物资申请计划
                                    <div class="ant-layout-content">
                                        <a-button type="link" class="position-absolute" size="small" style="right: 10px; top: -21px" @click="router.push('/purchase')">查看详情</a-button>
                                    </div>
                                </div>
                                <a-row>
                                    <template v-for="(item, index) of applyColumns" :key="index">
                                        <a-col v-if="item.dataIndex === 'date'" :span="4" class="table-title" :style="index !== 0 ? 'border-left: 0px' : ''">{{ item.title }}</a-col>
                                        <a-col v-else :span="5" class="table-title" :style="index !== 0 ? 'border-left: 0px' : ''">{{ item.title }}</a-col>
                                    </template>
                                </a-row>
                            </div>
                            <div class="table-body flex-auto" :style="`${applyList.length > 7 ? 'animation: scroll ' + applyList.length * 1.5 + 's linear infinite' : ''}`">
                                <template v-if="applyList.length">
                                    <a-row v-for="(item, index) of applyList" :key="index">
                                        <template v-for="(column, i) of applyColumns" :key="i">
                                            <a-col v-if="column.dataIndex === 'date'" class="li" :span="4">{{ item[column.dataIndex] }}</a-col>
                                            <a-col v-else data-content="完整内容" class="li" :span="5">{{ item[column.dataIndex] }}</a-col>
                                        </template>
                                    </a-row>
                                </template>
                                <template v-else>
                                    <a-empty v-else-show style="color: white" :image="simpleImage" />
                                </template>
                            </div>
                        </div>
                        <div class="br-statistics">
                            <div class="title ant-layout-content">
                                指标对比
                                <a-select
                                    v-model:value="indicator"
                                    class="theme-select"
                                    size="small"
                                    :options="indicatorOpts"
                                    option-filter-prop="label"
                                    style="position: absolute; right: 5px; top: 3px"
                                    @change="changeIndicator"
                                ></a-select>
                            </div>
                            <div id="indicatorStatistics" search style="height: calc(100% - 30px); overflow: hidden"></div>
                            <a-empty v-else-show style="color: white" :image="simpleImage" />
                        </div>
                    </div>
                </div>
                <div class="settle">
                    <div class="title ant-layout-content">
                        开累结算统计
                        <a-select
                            v-if="supplierSettleStatistics.length > settleSize"
                            v-model:value="settlePage"
                            size="small"
                            :options="settlePageOpts"
                            option-filter-prop="label"
                            style="position: absolute; right: 5px; top: 3px"
                            @change="changeSettlePage"
                        ></a-select>
                    </div>
                    <div class="t-settle">
                        <div id="supplierSettleAmountStatistics"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch, computed } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import { Pie, Line, Bar, Column, measureTextWidth, G2 } from '@antv/g2plot';
import { post } from '../utils/index.js';
import { useRouter } from 'vue-router';
import { Empty } from 'ant-design-vue';
import { add } from '../utils/operation.js';
import dayjs from 'dayjs';

const timeOptions = [
    { label: '本月', value: 1 },
    { label: '上月', value: 2 },
    { label: '本季度', value: 3 },
    { label: '上季度', value: 4 },
    { label: '本年', value: 5 },
    { label: '上年', value: 6 },
    { label: '自定义', value: 7 },
];
const search = ref({
    timeType: 1,
    date_range: [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().endOf('month').format('YYYY-MM-DD')],
});
const projectList = ref([]);
const searchProject = ref(null);
const chooseProject = ref(null);
const pieChart = ref(null);
const lineChart = ref(null);
const barChart = ref(null);
const columnChart = ref(null);
const fullscreenDiv = ref(null);
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
const router = useRouter();
const leftShow = ref(false);
const dailyType = ref(2);
const settleSize = 8;
const settlePage = ref(null);
const settlePageOpts = ref([]);
const dailyTypeOpts = [
    {
        value: 1,
        label: '钢筋',
    },
    {
        value: 2,
        label: '混凝土',
    },
];
const indicator = ref('account_type');
const indicatorOpts = [
    {
        value: 'account_type',
        label: '核算分类',
    },
    {
        value: 'expenditure',
        label: '支出方向',
    },
];
const applyColumns = [
    {
        title: '物料名称',
        dataIndex: 'material_name',
        sorter: false,
        ellipsis: true,
    },
    {
        title: '规格',
        dataIndex: 'model',
        sorter: false,
        ellipsis: true,
    },
    {
        title: '日期',
        dataIndex: 'date',
        sorter: false,
        ellipsis: true,
    },
    {
        title: '项目名称',
        dataIndex: 'project',
        sorter: false,
        ellipsis: true,
    },
    {
        title: '数量',
        dataIndex: 'quantity',
        sorter: false,
        ellipsis: true,
    },
];
const applyList = ref([]);
const contractStatistics = ref([]);
const contractSettleStatistics = ref({
    contract_amount: 0,
    settle_amount: 0,
});
const dailyQuantityStatistics = ref({
    apply: [],
    uselog: [],
    yanshou: [],
});

const supplierSettleStatistics = ref([]);
const indicatorStatistics = ref([]);
onMounted(async () => {
    projectList.value = (await post('department/projects?type=3', { page_size: 1000 })).data;
    chooseProject.value = null;
    await refreshDates();
});

function isService() {
    const params = { id: '' };
    let routeData = router.resolve({
        name: 'login',
        query: params,
    });
    window.open(routeData.href, '_blank');
}

function changeTimeType(timeType) {
    const quarter = dayjs()
        .set('month', parseInt(dayjs().month() / 3 + '') * 3)
        .startOf('month')
        .format('YYYY-MM-DD');
    switch (timeType) {
        case 1:
            search.value.date_range = [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().endOf('month').format('YYYY-MM-DD')];
            break;
        case 2:
            search.value.date_range = [dayjs().startOf('month').subtract(1, 'month').format('YYYY-MM-DD'), dayjs().endOf('month').subtract(1, 'month').format('YYYY-MM-DD')];
            break;
        case 3:
            search.value.date_range = [quarter, dayjs(quarter).add(2, 'month').endOf('month').format('YYYY-MM-DD')];
            break;
        case 4:
            search.value.date_range = [dayjs(quarter).subtract(3, 'month').format('YYYY-MM-DD'), dayjs(quarter).subtract(1, 'day').format('YYYY-MM-DD')];
            break;
        case 5:
            search.value.date_range = [dayjs().startOf('year').format('YYYY-MM-DD'), dayjs().endOf('year').format('YYYY-MM-DD')];
            break;
        case 6:
            search.value.date_range = [dayjs().subtract(1, 'year').startOf('year').format('YYYY-MM-DD'), dayjs().subtract(1, 'year').endOf('year').format('YYYY-MM-DD')];
            break;
        case 7:
            break;
    }
}
watch(
    () => search.value.date_range,
    async newVal => {
        refreshDates();
    }
);
watch(chooseProject, async value => {
    refreshDates();
});
const refreshDates = async () => {
    const start_date = search.value.date_range[0];
    const end_date = search.value.date_range[1];
    const searchData = {};
    if (start_date && end_date) {
        searchData.start_date = start_date;
        searchData.end_date = end_date;
    }
    const projectIdStr = chooseProject.value?.id || projectList.value.map(item => item.id).join(',');
    await Promise.all([
        selectContractStatistics({ project_ids: projectIdStr }),
        selectDailyQuantityStatistics({ project_ids: projectIdStr, ys_type: dailyType.value, ...searchData }),
        selectApplyList({ page: 1, size: 1000, project_ids: projectIdStr, ...searchData }),
        selectContractSettleStatistics({ project_ids: projectIdStr, ...searchData }),
        supplierSettleAmountStatistics({ project_ids: projectIdStr, ...searchData }),
        selectIndicatorStatistics({ project_ids: projectIdStr, type: indicator.value, ...searchData }),
    ]);
    updateLineChart();
    updatePieChart();
    updateBarChart();
    updateColumnChart();
};
const toChooseProject = record => {
    chooseProject.value = record;
};
const toChooseAllCompany = () => {
    if (!chooseProject.value) return;
    chooseProject.value = null;
    // refreshDates();
};
// 合同统计
const selectContractStatistics = search => {
    return new Promise((resolve, reject) => {
        post('dataBoard/contractStatistics', search).then(data => {
            contractStatistics.value = data;
            resolve(true);
        });
    });
};

// 合同结算统计
const selectContractSettleStatistics = search => {
    return new Promise((resolve, reject) => {
        post('dataBoard/contractSettleStatistics', search).then(data => {
            contractSettleStatistics.value = data;
            resolve(true);
        });
    });
};

// 供应商结算金额统计
const supplierSettleAmountStatistics = search => {
    let url = 'dataBoard/supplierSettleAmount';
    if (String(search.project_ids).split(',').length > 1) {
        url = 'dataBoard/projectSettleAmount';
    }
    return new Promise((resolve, reject) => {
        post(url, search).then(data => {
            supplierSettleStatistics.value = data;
            const pages = Math.ceil(supplierSettleStatistics.value.length / settleSize);
            settlePage.value = 1;
            settlePageOpts.value = new Array(pages).fill(1).map((item, index) => {
                return {
                    value: index + 1,
                    label: `第${index + 1}页`,
                };
            });
            resolve(true);
        });
    });
};

// 指标对比查询
const selectIndicatorStatistics = search => {
    return new Promise((resolve, reject) => {
        post('dataBoard/indicatorStatistics', search).then(data => {
            indicatorStatistics.value = data;
            resolve(true);
        });
    });
};

const selectDailyQuantityStatistics = search => {
    return new Promise((resolve, reject) => {
        post('dataBoard/dailyQuantityStatistics', search).then(data => {
            dailyQuantityStatistics.value = data;
            resolve(true);
        });
    });
};
// 物资申请计划
const selectApplyList = search => {
    return new Promise((resolve, reject) => {
        post('dataBoard/currentMonthApply', search).then(data => {
            applyList.value = data.map(item => {
                return {
                    ...item,
                    quantity: parseInt(item.quantity) === parseFloat(item.quantity) ? parseInt(item.quantity) : item.quantity,
                };
            });
            resolve(true);
        });
    });
};
function renderStatistic(containerWidth, text, style) {
    const textWidth = measureTextWidth(text, style);
    const textHeight = style.lineHeight || style.fontSize;
    const R = containerWidth / 2;
    // r^2 = (w / 2)^2 + (h - offsetY)^2
    let scale = 1;
    if (containerWidth < textWidth) {
        scale = Math.min(Math.sqrt(Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)))), 1);
    }
    const textStyleStr = `width:${containerWidth}px;`;
    return `<div style="${textStyleStr};font-size:${scale}em;line-height:${scale < 1 ? 1 : 'inherit'};color: white;">${text}</div>`;
}

const updatePieChart = () => {
    const data = contractStatistics.value;
    const G = G2.getEngine('canvas');
    const defaultOpt = {
        appendPadding: 10,
        angleField: 'amount',
        colorField: 'type',
        radius: 0.85,
        innerRadius: 0.6,
        // label: {
        // 	type: "inner",
        // 	offset: '-30%',
        // 	content: ({ count }) => {
        // 		return count
        // 	}
        // },
        label: {
            type: 'spider',
            // content: ({ type, count, amount }) => {
            // 	return `${(amount / 10000).toFixed(2)}万元`
            // }
            formatter(data, mappingData) {
                const group = new G.Group({});
                group.addShape({
                    type: 'text',
                    attrs: {
                        x: 10,
                        y: 8,
                        text: `${(data.amount / 10000).toFixed(2)}万元`,
                        fill: mappingData.color,
                    },
                });
                return group;
            },
        },
        statistic: {
            title: {
                offsetY: -4,
                style: {
                    fontSize: '36px',
                },
                customHtml: (container, view, datum) => {
                    const { width, height } = container.getBoundingClientRect();
                    const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
                    const text = datum ? datum.type : '合同总额';
                    return renderStatistic(d, text, { fontSize: 28 });
                },
            },
            content: {
                offsetY: 4,
                style: {
                    fontSize: '12px',
                },
                customHtml: (container, view, datum, data) => {
                    const { width } = container.getBoundingClientRect();

                    let text = add(data.map(item => item.amount));
                    if (text) {
                        text = `${(text / 10000).toFixed(2)}万元`;
                    }
                    return renderStatistic(width, text, { fontSize: 2 });
                },
            },
        },
        legend: {
            title: {
                text: `合同总数:${data.reduce((target, item) => target + item.count, 0)}份`,
                spacing: 10,
                style: { fill: 'white' },
            },
            itemValue: {
                formatter(text, item) {
                    const items = data.filter(d => d.type === item.value);
                    return (items[0] || {}).count + ' 份';
                },
                style: {
                    fill: 'white',
                },
            },
            itemName: {
                style: {
                    fill: 'white',
                },
            },
        },
        tooltip: {
            customContent(value, items) {
                const item = items.filter(i => i.data.type === value)[0];
                return `
            <div style="padding: 5px 0;text-align:left;">
                <div style="background-color: ${item?.color};border-radius: 50%;width: 8px;height:8px;display:inline-block;"></div> ${item?.data.type}</div>
            <div style="padding: 5px 0;text-align:left;"><b>合同数</b>: ${item?.data.count}</div>
            <div style="padding: 5px 0;text-align:left;"><b>合同总金额</b>: ${item?.data.amount}</div>
          `;
            },
        },
        interactions: [{ type: 'element-active' }],
    };
    if (!pieChart.value) {
        pieChart.value = new Pie('contractStatistics', {
            ...defaultOpt,
            data,
        });
        pieChart.value.render();
        pieChart.value.on('legend-item:click', event => {
            const target = event.gEvent?.shape?.attrs?.text;
            const data2Type = data.reduce((target, item) => {
                target[item.type] = item;
                return target;
            }, {});
            const typeObj = data2Type[target];
            if (!typeObj) return;
            const query = {
                type: typeObj.type_id,
                project_id: chooseProject.value.id,
            };
            if (typeObj.material_type) query.material_type = typeObj.material_type;
            switch (query.type) {
                case 1:
                    router.push({
                        path: `/contract`,
                        query,
                    });
                    break;
                case 2:
                    router.push({
                        path: `/contractzz`,
                        query,
                    });
                    break;
                case 3:
                    router.push({
                        path: `/contractjx`,
                        query,
                    });
                    break;
            }
            // 在这里处理你的点击事件逻辑
        });
    } else {
        pieChart.value.update({
            ...defaultOpt,
            data,
        });
    }
};

const updateLineChart = () => {
    const data = [];
    for (const key in dailyQuantityStatistics.value) {
        let type;
        switch (key) {
            case 'apply':
                type = '计划数量';
                break;
            case 'uselog':
                type = '出库数量';
                break;
            case 'yanshou':
                type = '验收数量';
                break;
        }
        for (const item of dailyQuantityStatistics.value[key]) {
            data.push({
                category: type,
                date: item.date,
                value: item.quantity,
            });
        }
    }
    const defaultOpt = {
        data,
        xField: 'date',
        yField: 'value',
        seriesField: 'category',
        legend: {
            position: 'top',
            itemName: {
                style: {
                    fill: 'white',
                },
            },
        },
        xAxis: {
            label: {
                style: {
                    fill: 'white',
                },
            },
        },
    };
    if (!lineChart.value) {
        lineChart.value = new Line('dailyStatistics', {
            ...defaultOpt,
            data,
        });
        lineChart.value.render();
    } else {
        lineChart.value.update({
            ...defaultOpt,
            data,
        });
    }
};

const updateBarChart = () => {
    const data = [];
    for (let i = (settlePage.value - 1) * settleSize; i < supplierSettleStatistics.value.length && i < settlePage.value * settleSize; i++) {
        const statistic = supplierSettleStatistics.value[i];
        data.push({
            name: statistic.name,
            type: '应结算额(万元)',
            amount: parseFloat((statistic.amount / 10000).toFixed(2)),
        });
        data.push({
            name: statistic.name,
            type: '已结算额(万元)',
            amount: parseFloat((statistic.settle_amount / 10000).toFixed(2)),
        });
    }
    const defaultCfg = {
        isGroup: true,
        xField: 'amount',
        yField: 'name',
        seriesField: 'type',
        // dodgePadding: 4,
        minBarWidth: 10,
        maxBarWidth: 40,
        legend: {
            position: 'top', // 将颜色标签放在图表的右侧
            itemName: {
                style: {
                    fill: 'white',
                },
            },
        },
        // label: {
        // 	// 可手动配置 label 数据标签位置
        // 	position: 'middle', // 'left', 'middle', 'right'
        // 	formatter(data) {
        // 		if (parseFloat(data.amount) === 0) return data.amount;
        // 		return data.amount + '万元';
        // 	},
        // 	// 可配置附加的布局方法
        // 	layout: [
        // 		// 柱形图数据标签位置自动调整
        // 		{ type: 'interval-adjust-position' },
        // 		// 数据标签防遮挡
        // 		{ type: 'interval-hide-overlap' },
        // 		// 数据标签文颜色自动调整
        // 		{ type: 'adjust-color' },
        // 	],
        // },
        xAxis: {
            // title: {
            //   text: '万元',
            //   position: 'end',
            // },
            label: {
                style: {
                    fill: 'white',
                },
                formatter(item) {
                    if (parseFloat(item) === 0) return item;
                    return item + '万元';
                },
            },
        },
        yAxis: {
            label: {
                style: {
                    fill: 'white',
                },
                // style: {
                //   textAlign: 'right'
                // },
                formatter(text) {
                    let result = '';
                    while (text) {
                        result += `${text.slice(0, 8)}\n`;
                        text = text.slice(8);
                    }
                    return result;
                },
            },
        },
        tooltip: {
            formatter: datum => {
                return { name: datum.name, value: datum.amount };
            },
        },
    };
    if (!barChart.value) {
        barChart.value = new Bar('supplierSettleAmountStatistics', {
            ...defaultCfg,
            data,
        });
        barChart.value.render();
    } else {
        barChart.value.update({
            ...defaultCfg,
            data,
        });
    }
};

const updateColumnChart = () => {
    const data = indicatorStatistics.value;
    const defaultCfg = {
        xField: 'name',
        yField: 'data',
        xAxis: {
            label: {
                autoRotate: false,
            },
        },
        slider: {
            start: 0,
            end: 1,
        },
        meta: {
            data: {
                alias: '数量',
            },
        },
    };
    if (!columnChart.value) {
        columnChart.value = new Column('indicatorStatistics', {
            ...defaultCfg,
            data,
        });
        columnChart.value.render();
    } else {
        columnChart.value.update({
            ...defaultCfg,
            data,
        });
    }
};

const innerProjectList = computed(() => {
    if (searchProject.value) {
        return projectList.value.filter(item => item.name.indexOf(searchProject.value) > -1);
    } else {
        return projectList.value;
    }
});
const fullScreen = () => {
    if (fullscreenDiv.value.requestFullscreen) {
        fullscreenDiv.value.requestFullscreen();
    } else if (fullscreenDiv.value.mozRequestFullScreen) {
        fullscreenDiv.value.mozRequestFullScreen();
    } else if (fullscreenDiv.value.webkitRequestFullscreen) {
        fullscreenDiv.value.webkitRequestFullscreen();
    } else if (fullscreenDiv.value.msRequestFullscreen) {
        fullscreenDiv.value.msRequestFullscreen();
    }
};
const changeDailyType = async () => {
    await selectDailyQuantityStatistics({ project_ids: chooseProject.value.id, ys_type: dailyType.value });
    updateLineChart();
};
const changeSettlePage = () => {
    updateBarChart();
};
const changeIndicator = async () => {
    await selectIndicatorStatistics({ project_ids: chooseProject.value.id, type: indicator.value });
    updateColumnChart();
};
</script>
<style>
@keyframes scroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-100%);
    }
}
</style>
<style scoped lang="scss">
$theme-color: #112c4a;
$theme-font-color: white;
$theme-border-color: #1d70d2;
:deep(.theme-btn) {
    color: $theme-font-color;
    background-color: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(34, 160, 243, 0.6);
}
:deep(.theme-btn):hover {
    color: $theme-font-color;
    background-color: rgba(0, 154, 255, 0.6);
    border: 1px solid rgba(34, 160, 243, 0);
}
.theme-input {
    color: $theme-font-color;
    background-color: $theme-color;
    border: 1px solid $theme-border-color;
    :deep(.ant-input) {
        color: $theme-font-color;
        background-color: $theme-color;
        border: $theme-border-color;
    }
    :deep(.ant-picker-input input),
    :deep(.anticon-swap-right),
    :deep(.ant-picker-suffix) {
        color: $theme-font-color !important;
    }
}

.theme-radio {
    color: $theme-font-color;
    background-color: $theme-color;
    border: 1px solid $theme-border-color;
    :deep(.ant-radio-button-wrapper) {
        color: $theme-font-color;
        background-color: $theme-color;
        border: $theme-border-color;
    }
    :deep(.ant-radio-button-checked) {
        background-color: #0e7eff;
    }
    :deep(.ant-radio-button-input) {
        display: none !important;
    }
   
}
.theme-select {
    color: $theme-font-color;
    background-color: $theme-color;
    border: 1px solid $theme-border-color;
    :deep(.ant-select-selector) {
        color: $theme-font-color;
        background-color: $theme-color;
        border: $theme-border-color;
    }
    :deep(.ant-select-arrow) {
        color: $theme-font-color;
    }
}
.board {
    text-align: center;
    color: $theme-font-color;
    background-color: $theme-color;
    > .title {
        .left-opt {
            position: absolute;
            left: 10px;
        }
        .full-screen {
            position: absolute;
            right: 10px;
            .time-filter {
                margin-right: 10px;
            }
        }
        position: relative;
        height: 64px;
        line-height: 64px;
        font-size: 20px;
        border-top: 1px solid $theme-border-color;
        border-bottom: 1px solid $theme-border-color;
        background-color: $theme-color;
    }
}

.left-list {
    height: calc(100vh - 124px);
    max-width: 200px;
    min-width: 200px;
    overflow-y: auto;
    .left-list-search {
        position: sticky;
        padding: 8px 10px;
        top: 0;
        background-color: $theme-color;
        z-index: 2;
    }
    .cursor-pointer {
        background-color: $theme-color;
        color: #4fa5ff;
    }
    .cursor-pointer:hover {
        color: #fdfdfd;
        background-color: #0e7eff;
    }
    .choose {
        color: #fdfdfd;
        background-color: #0e7eff;
    }
}
.border-main {
    height: calc(100vh - 124px);
    flex: 1;
    .title {
        color: $theme-font-color;
        background-color: $theme-color;
        padding: 5px 0;
        font-weight: bold;
    }
    .statistics {
        width: 70%;
        padding-right: 1px;
        flex-direction: column;
        .t-statistics {
            height: 65%;
            .tl-statistics {
                padding-right: 1px;
                width: 50%;
                overflow: hidden;
                flex-direction: column;
                .title {
                    border-bottom: 1px solid $theme-border-color;
                }
                .tl-t-statistics {
                    .title {
                        font-weight: bold;
                    }
                    height: 50%;
                    overflow: hidden;
                    border: 1px solid $theme-border-color;
                    border-top: none;
                }
                .tl-b-statistics {
                    height: 50%;
                    border: 1px solid $theme-border-color;
                    border-top: none;
                    .title {
                        border-bottom: 1px solid $theme-border-color;
                        font-weight: bold;
                    }
                    #dailyStatistics {
                        padding: 5px;
                    }
                }
            }
            .tr-statistics {
                .title {
                    border-bottom: 1px solid $theme-border-color;
                    font-weight: bold;
                }
                border-bottom: 1px solid $theme-border-color;
            }
        }
        .b-statistics {
            overflow: hidden;
            .bl-statistics {
                width: 50%;
                padding-right: 1px;
                height: 100%;
                overflow: hidden;
                flex-direction: column;
                border: 1px solid $theme-border-color;
                .bl-statistics-title {
                    position: sticky;
                    top: 0;
                    background-color: $theme-color;
                    z-index: 1;
                    font-weight: bold;
                    .table-title {
                        background-color: $theme-color;
                        padding: 8px 0;
                        border: 1px solid $theme-border-color;
                        //font-weight: bold;
                    }
                }

                .table-body {
                    //animation: scroll 20s linear infinite;
                    color: #98c5ff;
                    .li {
                        padding: 8px 0;
                        border-bottom: 1px solid $theme-border-color;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                }
            }
            .br-statistics {
                .title {
                    border-bottom: 1px solid $theme-border-color;
                    font-weight: bold;
                }
                max-width: 50%;
                flex: 1;
            }
        }
    }
    .settle {
        flex: 1;
        height: 100%;
        border: 1px solid $theme-border-color;
        .title {
            border-bottom: 1px solid $theme-border-color;
            font-weight: bold;
        }
        .t-settle {
            height: 100%;
            #supplierSettleAmountStatistics {
                padding: 0 5px;
                height: calc(100% - 35px);
            }
        }
    }
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* 修改滚动条轨道的背景颜色 */
::-webkit-scrollbar-track {
    background: #012650;
}

/* 修改滚动条滑块的背景颜色 */
::-webkit-scrollbar-thumb {
    background: #4fa5ff;
    border-radius: 1rem;
}

/* 修改滚动条滑块悬停时的背景颜色 */
::-webkit-scrollbar-thumb:hover {
    background: #4fa5ff;
}
</style>
